<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>IE</title>
    <script src="./template-web.js"></script>
  </head>

  <body>
    <div id="content"></div>
    <script id="test" type="text/html">
      {{if isAdmin}}
      <h1>{{title}}</h1>
      <ul>
        {{each list value i}}
        <li>索引 {{i + 1}} ：{{value}}</li>
        {{/each}}
      </ul>
      {{/if}}
      <button id="btn">点击</button>
    </script>
    <script>
      var data = {
        title: '基本例子',
        isAdmin: true,
        list: ['文艺', '博客', '摄影', '电影', '民谣', '旅行', '吉他'],
      }
      var html = template('test', data)
      document.getElementById('content').innerHTML = html

      document.getElementById('btn').onclick = function () {
        data.title = '改变后的标题'
        data.list.push('新增的元素')
        var html = template('test', data)
        document.getElementById('content').innerHTML = html
      }
    </script>
  </body>
</html>
